<template>
  <view class="home">
    <view class="button-container">


      <view class="glass-button red" @click="repairCompleted">
        <img src="/static/tabBar/photoRed.png" class="icon" mode="scaleToFill" />
        我要报修
      </view>


      <view class="glass-button green" @click="takePhotoForRepair">
        <img src="/static/tabBar/photoRed.png" class="icon" mode="scaleToFill" />
        维修完成
      </view>


    </view>
  </view>
</template>

<script setup>
  const takePhotoForRepair = () => {

    uni.navigateTo({
      url: '/pages/Tasklist/TaskList?name=维修列表', // 目标页面路径
    });
    console.log('完成维修按钮被点击 ');
    // 实现拍照逻辑...
  };

  const repairCompleted = () => {
    uni.navigateTo({
      url: '/pages/fixform/fixform?name=我要报修', // 目标页面路径
    });
    console.log('我要报修按钮被点击');
    // 实现相应逻辑...
  };
</script>

<style lang="scss">
  .home {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .button-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      height: 100%;
    }

    .glass-button {
      width: 375rpx;
      height: 375rpx;

      border-radius: 50%;
      font-size: 18px;

      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;


      .icon {
        width: 120rpx;
        height: 100rpx;
        padding-bottom: 15rpx;
        backdrop-filter: blur(20rpx);

      }


    }

    .red {
      background-color: #FF6347;
      /* 红色 */
    }

    .green {
      background-color: #2E8B57;
      /* 绿色 */
      margin-top: 20px;
    }


  }
</style>